/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Permanent+Marker&display=swap');

:root {
  --current-font: 'Open Sans', sans-serif;
  --focus-font: 'Permanent Marker', cursive;
  --gradient: linear-gradient(65deg, #fff 0%, #dbeff8 100%);
}

@font-face {
  font-family: 'dataFeeder';
  src: url('./assets/fonts/dataFeeder.woff') format('woff'),
    url('./assets/fonts/dataFeeder.svg') format('svg'),
    url('./assets/fonts/dataFeeder.ttf') format('ttf');
  /* src: url('./assets/fonts/dataFeeder.eot'); FIXME file looks corrupted */
}

html,
.force-font {
  font-family: 'Open Sans', 'dataFeeder', sans-serif !important;
}
.force-font {
  font-size: 1.1rem;
}

app-root {
  background: var(--gradient);
}

ui-button button[type='button'] {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
ui-button button[type='button']:hover {
  background: var(--color-primary-darker);
  border-color: var(--color-primary-darker);
}

ui-button button[type='button'].secondary {
  background: white;
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-width: 1px;
}
ui-button button[type='button'].secondary:hover {
  background: var(--color-primary-darker);
  color: white;
}

my-date-picker .mydp {
  border-color: var(--color-primary);
  border-width: 2px;
}

input:focus,
textarea:focus,
select:focus,
tag-input:focus-within,
my-date-picker .mydp:focus-within {
  border-color: var(--color-primary-darker) !important;
  color: black;
}

.grey1 {
  fill: #f2f3f4;
}

.grey3 {
  fill: #686c6d;
}

.grey2 {
  fill: #cfd8dc;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-50 {
  opacity: 0.5;
}

.text-current {
  font-family: var(--current-font);
  font-size: 30px;
  font-weight: normal;
}

.text-focus {
  font-family: var(--focus-font);
  font-size: 30px;
  font-weight: normal;
  line-height: 1;
}

.text-help {
  display: inline-block;
  margin: 20px 0 0;
  font-family: var(--current-font);
  font-size: 16px;
}

.text-legend {
  font-family: var(--current-font);
  font-size: 16px;
}

.hidden {
  visibility: hidden;
}

.mask {
  position: absolute;
  width: 0;
  height: 0;
}

.background-color {
  fill: var(--color-background);
}

.primary-color {
  fill: var(--color-primary);
}
.secondary-color {
  fill: var(--color-secondary);
}

.current-color {
  fill: var(--color-main);
}

.icon-title:before {
  content: '\e90a';
  font-size: 35px;
}

.icon-description:before {
  content: '\e90b';
  font-size: 35px;
}

.icon-tag:before {
  content: '\e90c';
  font-size: 35px;
}

.icon-date:before {
  content: '\e90d';
  font-size: 35px;
}

.icon-scale:before {
  content: '\e90e';
  font-size: 35px;
}

.icon-process:before {
  content: '\e90f';
  font-size: 35px;
}

.icon-check:before {
  content: '\e905';
}
